{% extends "./inc_base.html" %}
{%block body%}class="header-scroll-reveal"{%endblock%}
{% block middle %}
<div class="section pt-4 pb-4">
    <div class="container">
        <!--

	Color Schemas
	.swiper-white (default)
	.swiper-black
	.swiper-dark
	.swiper-primary
	.swiper-danger
	.swiper-success
	.swiper-warning
	.swiper-info
	.swiper-pink
	.swiper-indigo
	.swiper-purple

	Autoplay
	"autoplay": false
	"autoplay": { "delay" : 1500, "disableOnInteraction": false }

-->
        {% set position = 'cms_doc'|@findAll({
        include : 'cms_classify',
        where:{
        classify_id:classify.id,
        FIND_IN_SET:['position',1]
        },
        offset: 0,
        limit: 10
        })%}
        {%if position %}
        <div class="swiper-container swiper-purple mb-4 d-none d-lg-block" data-swiper='{
		"slidesPerView": 3,
		"spaceBetween": 8,
		"slidesPerGroup": 1,
		"loop": true,
		"autoplay": { "delay" : 3000, "disableOnInteraction": false },
		"breakpoints": {
			"1024": { "slidesPerView": "3" },
			"920":	{ "slidesPerView": "2" },
			"640":	{ "slidesPerView": "1" },
      "300":	{ "slidesPerView": "1" }
		}
	}'>

            <div class="hide swiper-wrapper">
                {%for item in position%}
                <div class="swiper-slide">
                    <div class="card">
                        <div class="row g-0">
                            <div class="col-md-4">
                                {%if not item.cover_url%}
                                <svg class="d-block w-100 rounded-start" xmlns="http://www.w3.org/2000/svg" role="img"
                                    style="text-anchor: middle; user-select: none ;height:104px">
                                    <rect width="100%" height="100%" fill="#c6d3e6"></rect>
                                    <text x="50%" y="50%" fill="#869ab8" dy=".2em">
                                        暂无图片
                                    </text>
                                </svg>
                                {%else%}
                                <img
                  style="height:104px"
                    class="img-fluid rounded-start"
                    src="{{item.cover_url}}"
                    alt="..."
                  />
                  {%endif%}
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <a href="/cms/detail/{{item.id}}" class="card-title"
                                        target="_blank">{{item.title|truncate(26, true, "...")}}</a>
                                    <p class="card-text">
                                        <small class="text-muted">{{item['cms_classify.title']}}/{{helper.moment(item.createdAt).fromNow()}}</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {%endfor%}


            </div>

            <!-- Add Arrows -->
            <div class="rounded-circle swiper-button-next"></div>
            <div class="rounded-circle swiper-button-prev"></div>

        </div>
        {%endif%}
        <div class="row">
            <div class="col-12 col-lg-10 order-2">
                <div class="shadow-xs bg-white mb-4 p-3 rounded clearfix">
                    <label class="h5 mb-0"> {{classify.title}} </label>

                    <div class="float-end position-relative mt-1 small">
                        排序: &nbsp;
                        <a href="{{ orderby.def.url }}" class="text-danger text-decoration-none"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            {{ orderby.def.name }}
                            <i class="fi fi-arrow-down-slim smaller"></i>
                        </a>

                        <ul class="dropdown-menu border-0 mt-3 rounded fs-6">
                            {% for item in orderby.list %}
                            <li class="dropdown-item {% if ctx.query.orderby==item.id %}active{% endif %}">
                                <a href="{{ item.url }}" class="text-muted small py-2 d-block">{{ item.name }}</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <hr />
                    <h1 class="h6 mb-0">
                        找到 <span class="text-danger">{{ list.count }}</span> 个相关结果
                    </h1>
                </div>

                {%for item in list.rows%}
                <!-- item -->
                <div class="shadow-xs rounded mb-3 p-3">
                    <div class="row g-0">
                        <div class="col-12 col-md-3 p--0">
                            <figure class="overflow-hidden text-center clearfix d-block m-0 position-relative">
                                <a href="/cms/detail/{{item.id}}" class="text-decoration-none" target="_blank">
                                    {%if not item.cover_url%}
                                    <svg class="d-block w-100 fs-1 rounded" xmlns="http://www.w3.org/2000/svg"
                                        role="img" style="text-anchor: middle; user-select: none">
                                        <rect width="100%" height="100%" fill="#c6d3e6"></rect>
                                        <text x="50%" y="50%" fill="#869ab8" dy=".3em">
                                            暂无图片
                                        </text>
                                    </svg>
                                    {%else%}
                                    <img
                    class="img-fluid rounded lazy"
                    data-src="{{item.cover_url}}"
                    src=""
                    alt="..."
                  />
                  {%endif%}
                                </a>
                            </figure>
                        </div>
                        <div class="col-12 mt-3 d-block d-sm-none">
                            <!-- mobile spacer -->
                        </div>
                        <div class="col-12 col-md-9 order-xs-3 order-md-2 order-lg-2 p-0 position-relative">
                            {%if item.level>0%}
                            <span class="position-absolute top-0 end-0 mt-1" data-bs-toggle="tooltip" data-bs-placement="top" title="置顶[{{item.level}}]">
                <svg width="15" viewBox="0 0 512 512" class="fill-danger"><path d="M141.938 324.965l-130.119 159.058c-3.387 4.146-3.517 10.24 0 14.535 4.002 4.918 11.247 5.646 16.147 1.625l159.107-130.131c-8.13-7.24-15.955-14.598-23.244-21.893-7.63-7.626-14.92-15.401-21.891-23.194zM447.89 64.1c-44.49-44.502-94.756-66.346-112.309-48.846-.903.908-92.757 126.197-138.796 188.98-30.166-21.5-57.219-34.082-74.656-34.068-6.374 0-11.485 1.662-14.971 5.18-19.197 19.164 16.646 86.076 80.028 149.459 51.797 51.797 105.971 85.223 134.488 85.223 6.387 0 11.472-1.68 14.971-5.178 13.084-13.084.548-48.41-28.858-89.658 62.802-46.043 188.047-137.893 188.932-138.781 17.535-17.518-4.339-67.804-48.829-112.311z"></path></svg>
              </span>
                            {%endif%}
                            <div class="p-0 p-lg-3">
                                <h3 class="h5 mb-2">
                                    <a href="/cms/detail/{{item.id}}" target="_blank"> {{item.title}} </a>
                                </h3>

                                <p class="mb-2">
                                    {{item.description|truncate(80, true, "...")}}
                                </p>

                                <ul class="list-inline text-gray-700 small mb-2">
                                    <li class="list-inline-item">{{item.pathTitle}}</li>
                                    <li class="list-inline-item">/</li>
                                    <li class="list-inline-item">
                                        {{helper.moment(item.createdAt).fromNow()}}
                                    </li>
                                    <li class="list-inline-item">/</li>
                                    <li class="list-inline-item">{{item.view}}次</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /item -->
                {%endfor%}
                <!-- pagination -->
                <nav aria-label="pagination" class="mt-4">{{pagination|safe}}</nav>
                <!-- pagination -->
            </div>

            <div class="col-12 col-lg-2 mb-3 order-1">
                <form method="get" action="{{ classify.url }}" class="input-group-over d-block mb-2">
                    <div class="form-floating mb-3">
                        <input
              placeholder="搜索..."
              id="doc_search"
              name="keywords"
              type="text"
              class="form-control"
              value="{{ ctx.query.keywords }}"
            />
            {% if ctx.query.sub %}
                        <input name="sub" type="hidden" value="{{ ctx.query.sub }}" />
            {% endif %}
                        <label for="doc_search">搜索...</label>
                    </div>

                    <button type="submit" class="btn smaller">
            <i class="fi fi-search m-0"></i>
          </button>
                </form>
                {%set classifyList = classify.id|@classify('top')%} {%if classifyList%}
                <!-- CATEGORIES -->
                <nav
                    class="nav-deep nav-deep-light mb-3 shadow-xs shadow-none-md shadow-none-xs px-3 pb-3 p-0-md p-0-xs rounded">
                    <!-- mobile trigger : categories -->
                    <button
            class="clearfix btn btn-toggle btn-sm w-100 text-align-left shadow-md border rounded mb-1 d-block d-lg-none"
            data-bs-target="#nav_responsive"
            data-toggle-container-class="d-none d-sm-block bg-white shadow-md border animate-fadein rounded p-3"
          >
            <span class="group-icon px-2 py-2 float-start">
              <i class="fi fi-bars-2"></i>
              <i class="fi fi-close"></i>
            </span>
            <span class="h5 py-2 m-0 float-start"> 分类 </span>
          </button>

                    <!-- desktop only -->
                    <h5 class="py-3 m-0 d-none d-lg-block">分类</h5>

                    <!-- navbar : navigation -->
                    <ul id="nav_responsive" class="nav flex-column d-none d-lg-block">
                        {%for item in classifyList%}
                        <li
                            class="nav-item {%if (item.id ==classify.id) or (classify.id in (item.arrId or [])) %}active{%endif%}">
                            {%if item.children%}
                            <a class="nav-link px-0" href="#">
                                <span class="group-icon">
                  <i class="fi fi-arrow-end"></i>
                  <i class="fi fi-arrow-down"></i>
                </span>
                                <span class="px-2 d-inline-block"> {{item.title}} </span>
                            </a>
                            {%else%}
                            <a class="nav-link px-0" href="{{item.url}}">
                                <i class="fi fi-arrow-end m-0 smaller"></i>
                                <span class="px-2 d-inline-block"> {{item.title}} </span>
                            </a>
                            {%endif%} {%if item.children%}
                            <ul class="nav flex-column ps-2">
                                {%for _item in item.children%}
                                <li class="nav-item {%if _item.id ==classify.id%}active{%endif%}">
                                    <a class="nav-link" href="{{_item.url}}"> {{_item.title}} </a>
                                </li>
                                {%endfor%}
                            </ul>
                            {%endif%}
                        </li>
                        {%endfor%}
                    </ul>
                </nav>
                <!-- /CATEGORIES -->
                {%endif%} {% set subclassify = classify.id|@classify('sub') %} {% for
                item in subclassify%}
                <!-- Suggestions -->
                <div
                    class="card border-0 shadow-xs d-block mb-3 px-3 pb-3 shadow-none-md shadow-none-xs p-0-md p-0-xs rounded">
                    <!-- mobile trigger : categories -->
                    <button
            class="clearfix btn btn-toggle btn-sm w-100 text-align-left shadow-md border rounded mb-1 d-block d-lg-none"
            data-bs-target="#nav_{{ item.name }}"
            data-toggle-container-class="d-none d-sm-block bg-white shadow-md border animate-fadein rounded p-3"
          >
            <span class="group-icon px-2 py-2 float-start">
              <i class="fi fi-bars-2"></i>
              <i class="fi fi-close"></i>
            </span>
            <span class="h5 py-2 m-0 float-start"> {{ item.label }} </span>
          </button>
                    <!-- desktop only -->
                    <h6 class="py-3 m-0 d-none d-lg-block">{{ item.label }}</h6>
                    {% if item.type=='radios' %}
                    <div id="nav_{{ item.name }}" class="checkgroup flex-column d-none d-lg-block classify-sub"
                        data-type="{{ item.type }}" data-name="{{ item.name }}" data-url="{{ item.url }}"
                        data-checkgroup-checkbox-single="true">
                        {% for v in item.options %}
                        <div class="form-check mb-1">
                            <!-- item -->
                            <input
                class="form-check-input form-check-input-primary class-sub-input"
                name="{{ item.name }}"
                type="checkbox"
                value="{{ v.value }}"
                id="{{ item.name }}-{{ v.value }}"
                {%
                if
                v.check
                %}checked{%
                endif
                %}
              />
                            <label
                class="form-check-label"
                for="{{ item.name }}-{{ v.value }}"
              >
                {{ v.label }}
              </label>
                        </div>
                        {% endfor %}
                    </div>
                    {% elif item.type=='checkboxes' %}
                    <div id="nav_{{ item.name }}" class="checkgroup flex-column d-none d-lg-block">
                        <div class="form-check mb-2">
                            <!-- check all -->
                            <input
                data-checkall-container="#checkall-{{ item.name }}"
                class="form-check-input form-check-input-default class-sub-input"
                type="checkbox"
                value=""
                id="checkall-{{ item.name }}-top"
              />
                            <label
                class="form-check-label"
                for="checkall-{{ item.name }}-top"
              >
                全选/不选
              </label>
                        </div>

                        <div id="checkall-{{ item.name }}" class="ps-0 classify-sub" data-type="{{ item.type }}"
                            data-name="{{ item.name }}" data-url="{{ item.url }}">
                            {% for v in item.options %}
                            <div class="form-check mb-1">
                                <!-- item -->
                                <input
                  class="form-check-input form-check-input-primary class-sub-input"
                  name="{{ item.name }}"
                  type="checkbox"
                  value="{{ v.value }}"
                  id="{{ item.name }}-{{ v.value }}"
                  {%
                  if
                  v.check
                  %}checked{%
                  endif
                  %}
                />
                                <label
                  class="form-check-label"
                  for="{{ item.name }}-{{ v.value }}"
                >
                  {{ v.label }}
                </label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
                <!-- /Suggestions -->
                {% endfor %}
                <!-- BANNER -->
                <a href="#!"
                    class="mt-0 d-none d-lg-block text-center overlay-dark-hover overlay-opacity-2 rounded overflow-hidden">
                    <img class="w-100 img-fluid rounded" src="/public/assets/demo.files/images/unsplash/portfolio/thumb_330/boxed-water-is-better-6RTh34xCS1M-unsplash-min.jpg" alt="...">
                </a>
                <h4 class="small text-gray-500 fw-normal mt-1 mb-0 d-none d-lg-block">
                    Sponsored Ad
                </h4>
                <!-- /BANNER -->
            </div>
        </div>
    </div>
</div>

{% endblock %}
{%block script%}
<script src="/public/cms/{{'cms'|@template('path')}}/js/list.js?v={{'cms'|@template('version')}}"></script>
{%endblock%}